<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #template {
            display: none;
        }

        .table tr:nth-of-type(1) th:nth-of-type(6) {
            width: 400px;
        }

        #mask {
            position: fixed;
            background-color: rgba(0, 0, 0, 0.5);
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: none;
        }

        #popup {
            width: 550px;
            padding: 30px;
            background-color: white;
            border-radius: 15px;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
            display: none;
        }

        .adds {
            float: right;
            margin-right: 15px;
            margin-top: 15px;
            margin-bottom: 15px;
        }

        #send {
            position: relative;
            right: -40%;
        }

        #can {
            position: relative;
            right: -30%;
        }

        #cancle {
            border: 1px solid #999999;
            border-radius: 5px;
            position: absolute;
            top: 16px;
            right: 15px;
            padding: 1px 5px;
        }

        .del {
            width: 400px;
            height: 300px;
            background-color: white;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
            display: none;
            border-radius: 15px;
            box-sizing: border-box;
        }

        .del h3 {
            width: 360px;
            padding-left: 30px;
        }

        #canDe {
            position: absolute;
            bottom: 50px;
            right: 50%;
        }

        #sendDe {
            position: absolute;
            bottom: 50px;
            right: 15%;
        }

        h2 {
            width: 100%;
            text-align: center;
        }

        h4 {
            display: inline;
            margin-right: 15px;
        }

        .jump {
            float: left;
            margin-left: 15px;
            width: 70px;
            height: 30px;
            border: 1px solid #e3e3e3;
            border-radius: 6px;
            text-align: center;
            line-height: 30px;
        }

        .jump1 {
            float: left;
            margin-left: 15px;
            width: 70px;
            height: 30px;
            border: 1px solid #e3e3e3;
            border-radius: 6px;
            text-align: center;
            line-height: 30px;
        }

        a:hover {
            text-decoration: none;
        }
    </style>
</head>

<body>
    <h2>学生信息管理系统</h2>
    <div class="jump"><a href="students.html">学生管理</a></div>
    <div class="jump1"><a href="score.html">成绩查询</a></div>
    <div class="adds">
        <h4>欢迎 <b id="users"></b> 登录</h4>
        <button class="btn btn-primary" id="esc">退出</button>
    </div>
    <table class="table">
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>所在城市</th>
            <th>操作</th>
        </tr>
        <tr id="template">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>
                <button class="btn btn-danger delete">删除学员</button>
                <button class="btn btn-primary update" id="changeStudent">修改学员</button>
                <button class="btn btn-primary" id="popupShow">添加学员</button>
            </td>
        </tr>
    </table>
    <div id="popup">
        <span id="cancle"> X </span>
        <p>
            <label for="newName">姓名</label>
            <input type="text" class="form-control" id="newName" placeholder="请输入学生姓名" />
        </p>
        <p>
            <label for="newAge">年龄</label>
            <input type="number" class="form-control" id="newAge" placeholder="请输入学生年龄" />
        </p>
        <p>
            <label for="newCity">所在城市</label>
            <select name="" id="province"></select>
            <select name="" id="city"></select>
            <select name="" id="area"></select>
        </p>
        <p>
            <b> 性别:</b>
            <label>
                <input type="radio" name="sex" id="boy" value="option1" /> 男
            </label>
            <label>
                <input type="radio" name="sex" id="girl" value="option2" checked /> 女
            </label>
        </p>
        <button class="btn btn-default" id="can">取消提交</button>
        <button class="btn btn-primary" id="send">确认提交</button>
    </div>
    <div class="del">
        <h3>您可要想清楚啊，删除了就找不到了哟!</h3>
        <button class="btn btn-default" id="canDe">取消删除</button>
        <button class="btn btn-danger" id="sendDe">确认删除</button>
    </div>
    <div id="mask"></div>

    <script src="jquery.min.js"></script>
    <script src="citys.js"></script>
    <script>
        let username = sessionStorage.getItem("username")
        if (!username) {
            location.href = "http://127.0.0.1/login.html"
        }
        $("#users").html(username)

        let province = $("#province");
        let city = $("#city");
        let area = $("#area");


        citys.forEach(item => {
            let cityName = $(`<option>${item.provinceName}</option>`);
            $("#province").append(cityName)
        })

        province.change(function () {
            city.empty();
            area.empty();
            cityList = citys[this.selectedIndex].mallCityList;
            cityList.forEach(item => {
                let cityN = $(`<option>${item.cityName}</option>`);
                city.append(cityN)
            })
            cityList[0].mallAreaList.forEach(item => {
                let areaN = $(`<option>${item.areaName}</option>`);
                area.append(areaN)
            })
        })

        city.change(function () {
            area.empty();
            let areaList = cityList[this.selectedIndex].mallAreaList;
            areaList.forEach(item => {
                let op = $(`<option>${item.areaName}</option>`);
                area.append(op);
            })
        })

        // 插入页面
        $.ajax({
            //发送请求的方式
            // dataType: "jsonp",
            url: "http://127.0.0.1:80/set",
            success(data) {
                var data = JSON.parse(data);
                data.forEach(item => {
                    let newItem = $("#template").clone(true);
                    newItem.attr("id", " ").appendTo($("tbody"))
                    newItem.find("td").eq(0).html(item.id)
                    newItem.find("td").eq(1).html(item.name)
                    newItem.find("td").eq(2).html(item.sex ? "男" : "女")
                    newItem.find("td").eq(3).html(item.age)
                    newItem.find("td").eq(4).html(item.city)
                })
            }
        })

        // 删除学员
        $(".delete").click(function () {
            $("#mask").fadeIn();
            $(".del").fadeIn();
            $("#sendDe").click(() => {
                $.ajax({
                    //发送请求的方式
                    // dataType: "jsonp",
                    data: {
                        id: $(this).closest("tr").find("td").eq(0).html()
                    },
                    url: "http://127.0.0.1:80/delete",
                    success(data) {
                        if (data === "success") {
                            history.go(0)
                        } else {
                            alert("删除失败!")
                        }
                    }
                })
            })
        })

        //插入学员
        $("#popupShow").click(function () {
            $("#newName").val("");
            $("#newAge").val("");
            $("#mask").fadeIn();
            $("#popup").fadeIn();
            //添加学员

            $("#send").click(function () {
                $.ajax({
                    url: "http://127.0.0.1:80/add",
                    data: {
                        name: $("#newName").val(),
                        age: $("#newAge").val(),
                        city: province.val() + city.val() + area.val(),
                        sex: $("#girl")[0].checked ? 0 : 1
                    },
                    success(data) {
                        if (data === "成功") {
                            alert("添加成功")
                            history.go(0);
                        } else {
                            alert("添加失败")
                        }
                    }
                })
            })
        })

        //修改学员
        $(".update").click(function () {
            $("#newName").val($(this).closest("tr").find("td").eq(1).html());
            $(this).closest("tr").find("td").eq(2).html() === "男" ? $("#boy")[0].checked = "checked" : $(
                "#girl")[0].checked = "checked"
            $("#newAge").val($(this).closest("tr").find("td").eq(3).html());
            $("#province").val(($(this).closest("tr").find("td").eq(4).html()));
            $("#mask").fadeIn();
            $("#popup").fadeIn();
            $("#send").click(() => {
                $.ajax({
                    url: "http://127.0.0.1:80/update",
                    data: {
                        name: $("#newName").val(),
                        age: $("#newAge").val(),
                        city: province.val() + city.val() + area.val(),
                        sex: $("#girl")[0].checked ? 0 : 1,
                        id: $(this).closest("tr").find("td").eq(0).html()
                    },
                    success(data) {
                        if (data === "成功") {
                            history.go(0);
                        } else {
                            alert("修改失败")
                        }
                    }
                })
            })
        })

        $("#esc").click(function () {
            sessionStorage.clear();
            location.href = "http://127.0.0.1/login.html"
        })
        $("#canDe").click(function () {
            $("#mask").fadeOut();
            $(".del").fadeOut();
        })

        $("#cancle").click(function () {
            $("#mask").fadeOut();
            $("#popup").fadeOut();
        })

        $("#can").click(function () {
            $("#mask").fadeOut();
            $("#popup").fadeOut();
        })
    </script>
</body>

</html>